import { InfoCircleFilled } from '@ant-design/icons';
import { useKeyPress } from 'ahooks';
import { App, Button, Input, Popover, Tag, Timeline } from 'antd';
import React, { useCallback, useMemo, useState } from 'react';
import {
  Background,
  ControlButton,
  MiniMap,
  MiniMapNodeProps,
  Panel,
  useReactFlow,
  useViewport,
} from 'reactflow';
import { useContextSelector } from 'use-context-selector';

import versionService, { getAppVersionDetail } from '@/api/services/versionService';
import { useScrollPagination } from '@/hooks/use-pagination/useVirtualScrollPagination';
import { useRequest2 } from '@/hooks/use-request';
import { t } from '@/locales/i18n';
import NodeFlowSystemConfig from '@/pages/app/detail/components/Workflow/components/nodes/NodeFlowSystemConfig';
import {
  WorkflowContext,
  WorkflowSnapshotsType,
} from '@/pages/app/detail/components/Workflow/context';
import { AppContext } from '@/pages/app/detail/context';
import { formatTime2YMDHMS } from '@/pages/chat/tools/time';
import { AppVersionSchemaType, VersionListItemType } from '@/types/app/api';
import { FlowNodeTypeEnum } from '@/types/workflow/constant';
import { getRelativeTimeString } from '@/utils/time';

import EmptyTip from '../EmptyTip';
import { SvgIcon } from '../icon';
import { CircleLoading } from '../loading';
import MyTooltip from '../tooltip';

import styles from './index.module.scss';
import NodeTemplatesModal from './NodeTemplatesModal';
import WorkflowCheckList from './WorkflowCheckList';

// 辅助函数：判断字符串是否为合法的时间格式
const isValidDateString = (dateString: string) => {
  // 检查是否为纯数字
  if (/^\d+$/.test(dateString)) {
    return false;
  }

  const date = new Date(dateString);
  return date instanceof Date && !Number.isNaN(date.getTime());
};

const buttonStyle = {
  border: 'none',
  borderRadius: '6px',
  padding: '4px',
};

export const minZoom = 0.1;
export const maxZoom = 1.5;

// 本地历史编辑
const LocalHistoryEdit = <T extends WorkflowSnapshotsType>({
  past,
  onSwitchTmpVersion,
}: {
  past: T[];
  onSwitchTmpVersion: (params: T, customTitle: string) => void;
}) => {
  const { message } = App.useApp();
  return (
    <div className="flex h-full flex-col">
      {past.length > 0 && (
        <div className="shrink-0 px-5 py-2">
          <Button
            className="h-8 w-full"
            onClick={async () => {
              const initialSnapshot = past[past.length - 1];
              onSwitchTmpVersion(initialSnapshot, t(`version_initial_copy`));
              message.success(t('workflow.Switch_success'));
            }}
          >
            {t('version_back')}
          </Button>
        </div>
      )}
      <div className="flex-1 overflow-y-auto px-5">
        <div className="flex flex-col">
          {past.map((item, index) => {
            return (
              <div
                className="flex cursor-pointer items-center rounded-md px-3 py-2 font-bold hover:bg-primary-700"
                key={index}
                onClick={() => {
                  onSwitchTmpVersion(item, `${t('version_copy')}-${item.title}`);
                  message.success(t('workflow.Switch_success'));
                }}
              >
                <div className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-sm text-gray-800">
                  {typeof item.title === 'string' && !Number.isNaN(Date.parse(item.title))
                    ? `${getRelativeTimeString(item.title)} 编辑`
                    : item.title}{' '}
                </div>
              </div>
            );
          })}
          <div className="py-2 text-center text-xs text-gray-600">{t('common.No more data')}</div>
        </div>
      </div>
    </div>
  );
};

// 云端历史编辑
const CloudHistoryEdit = ({
  onSwitchCloudVersion,
}: {
  onSwitchCloudVersion: (appVersion: AppVersionSchemaType) => void;
}) => {
  const { appDetail } = useContextSelector(AppContext, (v) => v);
  const { message } = App.useApp();

  const [editIndex, setEditIndex] = useState<number | undefined>(undefined);
  const [hoveredIndex, setHoveredIndex] = useState<number | undefined>(undefined);

  const {
    data: scrollDataList,
    isLoading,
    ScrollData,
    setData,
  } = useScrollPagination(versionService.getWorkflowVersionList, {
    pageSize: 10,
    params: {
      appId: appDetail.id,
    },
  });

  const { runAsync: onChangeVersion, loading: isLoadingVersion } = useRequest2(
    async (versionItem: VersionListItemType) => {
      const versionDetail = await getAppVersionDetail(versionItem._id, versionItem.appId);

      if (!versionDetail) return;

      onSwitchCloudVersion(versionDetail);
      message.success(t('workflow.Switch_success'));
    },
  );

  const { runAsync: onUpdateVersion, loading: isEditing } = useRequest2(
    async (item: VersionListItemType, name: string) => {
      await versionService.updateAppVersion({
        appId: item.appId,
        versionName: name,
        versionId: item._id,
      });
      setData((state) =>
        state.map((version) =>
          version._id === item._id ? { ...version, versionName: name } : version,
        ),
      );
      setEditIndex(undefined);
    },
  );

  return (
    <div className="relative flex max-h-[500px] flex-col overflow-auto px-4">
      {/* 绝对定位的loading层 */}
      {(isLoadingVersion || (scrollDataList.length === 0 && isLoading)) && (
        <div className="absolute inset-0 z-50 flex items-center justify-center bg-white bg-opacity-80">
          <CircleLoading />
        </div>
      )}

      {scrollDataList.length === 0 ? (
        <div className="flex h-full items-center justify-center">
          <EmptyTip text="还没有版本历史哦~" className="mb-2" />
        </div>
      ) : (
        <div className="mb-2 mt-2 overflow-hidden">
          <ScrollData
            style={{ maxHeight: '440px', paddingRight: '5px' }}
            className="overflow-y-auto overflow-x-hidden"
          >
            <Timeline>
              {scrollDataList.map((data, index) => {
                const item = data;
                const firstPublishedIndex = scrollDataList.findIndex((data) => data.isPublish);

                return (
                  <Timeline.Item
                    color={
                      item.isPublish ? (index === firstPublishedIndex ? 'green' : 'blue') : 'gray'
                    }
                    style={{ paddingBottom: 2 }}
                    key={index}
                  >
                    <div
                      className={`flex cursor-pointer items-center rounded-md p-1 font-bold hover:bg-primary-700 ${
                        index === 0 ? 'mt-2' : ''
                      }`}
                      onMouseEnter={() => setHoveredIndex(index)}
                      onMouseLeave={() => setHoveredIndex(undefined)}
                    >
                      {editIndex !== index ? (
                        <>
                          <div
                            className={`flex flex-1 items-center overflow-hidden text-sm ${
                              editIndex !== undefined ? 'pointer-events-none' : ''
                            }`}
                            onClick={() => {
                              editIndex === undefined && onChangeVersion(item);
                            }}
                          >
                            <div className="flex min-w-0 flex-col overflow-hidden text-ellipsis">
                              <span className="truncate font-font-weight-600 text-text-5">
                                {(item.versionName && !isValidDateString(item.versionName)
                                  ? item.versionName
                                  : '未命名') || formatTime2YMDHMS(item.time)}
                              </span>
                              <span className="text-xs text-text-3">
                                {formatTime2YMDHMS(item.time)}
                              </span>
                            </div>
                            {item.isPublish && (
                              <div className="ml-auto">
                                <Tag
                                  className="flex-shrink-0"
                                  color={index === firstPublishedIndex ? 'green' : 'blue'}
                                >
                                  {index === firstPublishedIndex
                                    ? t('app.version_current')
                                    : t('app.version_past')}
                                </Tag>
                              </div>
                            )}
                          </div>
                          {hoveredIndex === index && (
                            <SvgIcon
                              icon="ic-edit"
                              size={18}
                              className="mx-2 hover:text-primary-600"
                              onClick={(e) => {
                                e.stopPropagation();
                                setEditIndex(index);
                              }}
                            />
                          )}
                        </>
                      ) : (
                        <div>
                          <Input
                            autoFocus
                            className="h-8"
                            defaultValue={
                              (item.versionName && !isValidDateString(item.versionName)
                                ? item.versionName
                                : '未命名') || formatTime2YMDHMS(item.time)
                            }
                            onClick={(e) => e.stopPropagation()}
                            onBlur={(e) => {
                              e.stopPropagation();
                              onUpdateVersion(item, (e.target as HTMLInputElement).value);
                            }}
                            onKeyDown={(e) => {
                              if (e.key === 'Enter') {
                                onUpdateVersion(item, (e.target as HTMLInputElement).value);
                              }
                            }}
                          />
                        </div>
                      )}
                    </div>
                  </Timeline.Item>
                );
              })}
            </Timeline>
          </ScrollData>
        </div>
      )}
    </div>
  );
};

const FlowController = React.memo(function FlowController({
  preview = false,
}: {
  preview?: boolean;
}) {
  const { fitView, zoomIn, zoomOut, getZoom } = useReactFlow();
  const [isOpenTemplate, setIsOpenTemplate] = React.useState(false);
  const [isOpenSystemConfig, setIsOpenSystemConfig] = React.useState(false);

  const controlPanelClass = 'flex items-center rounded-lg bg-white p-1 shadow-sm';

  const onCloseTemplate = () => {
    setIsOpenTemplate(false);
  };

  const onOpenTemplate = () => {
    setIsOpenTemplate(true);
  };

  const { zoom } = useViewport();
  const {
    undo,
    redo,
    canRedo,
    canUndo,
    workflowControlMode,
    setWorkflowControlMode,
    mouseInCanvas,
    nodeList,
    nodes,
    onChangeNode,
    past,
    onSwitchTmpVersion,
    onSwitchCloudVersion,
    flowData2StoreDataAndCheck,
    setWorkflowTestData,
    checkList,
    isOpenTest,
  } = useContextSelector(WorkflowContext, (v) => v);

  const filteredNodes = useMemo(
    () => nodes.filter((node) => node.type !== FlowNodeTypeEnum.systemConfig),
    [nodes],
  );

  const selectedNode = useMemo(() => {
    return filteredNodes.find((node) => node.selected);
  }, [filteredNodes]);

  const focusNode = (nodeId: string) => {
    const node = nodes.find((node) => node.id === nodeId);
    if (node) {
      fitView({
        nodes: [node],
        duration: 300,
        padding: 0.8,
      });
    }
  };

  const FitFlowView = () => {
    fitView({
      nodes: filteredNodes,
      duration: 300,
      padding: 0.8,
    });
  };

  const ChangeAllNodesFold = (isFolded: boolean) => {
    filteredNodes.forEach((node) => {
      onChangeNode({
        nodeId: node.id,
        type: 'attr',
        key: 'isFolded',
        value: isFolded,
      });
    });
  };

  const isMac = !window ? false : window.navigator.userAgent.toLocaleLowerCase().includes('mac');

  // Controller shortcut key
  useKeyPress(['ctrl.z', 'meta.z'], (e) => {
    if (!mouseInCanvas) return;
    undo();
  });
  useKeyPress(['ctrl.shift.z', 'meta.shift.z', 'ctrl.y', 'meta.y'], (e) => {
    if (!mouseInCanvas) return;
    redo();
  });
  useKeyPress(['ctrl.add', 'meta.add', 'ctrl.equalsign', 'meta.equalsign'], (e) => {
    e.preventDefault();
    if (!mouseInCanvas) return;
    zoomIn();
  });
  useKeyPress(['ctrl.dash', 'meta.dash'], (e) => {
    e.preventDefault();
    if (!mouseInCanvas) return;
    zoomOut();
  });

  /* 
    id: Render node id
   */
  const MiniMapNode = useCallback(
    ({ x, y, width, height, color, id }: MiniMapNodeProps) => {
      // If the node parentNode is folded, the child node will not be displayed
      const node = nodeList.find((node) => node.nodeId === id);
      const parentNode = node?.parentNodeId
        ? nodeList.find((n) => n.nodeId === node?.parentNodeId)
        : undefined;
      if (parentNode?.isFolded) {
        return null;
      }

      return <rect x={x} y={y} width={width} height={height} fill={color} />;
    },
    [nodeList],
  );

  const historyContent = useMemo(() => {
    return (
      <div className="flex max-h-[600px] w-72 flex-col pr-2">
        <div className="mt-2 shrink-0 px-2">
          <div className="flex items-center gap-2 rounded-2xl border border-primary bg-primary-700 p-2">
            <InfoCircleFilled
              className="ml-2 mr-1"
              size={28}
              style={{ color: 'var(--brand-color)' }}
            />
            <div className="text-xs">
              您的编辑操作将被跟踪并存储在您的设备上，直到您离开编辑器。此历史记录将在您离开编辑器时被清除。
            </div>
          </div>
        </div>
        <div className="flex-1 overflow-auto">
          <LocalHistoryEdit past={past} onSwitchTmpVersion={onSwitchTmpVersion} />
        </div>
      </div>
    );
  }, [past, onSwitchTmpVersion]);

  const cloudHistoryContent = useMemo(() => {
    return (
      <div className="flex max-h-[600px] w-72 flex-col">
        <div className="mt-2 shrink-0 px-2">
          <div className="flex items-center gap-2 rounded-2xl border border-primary bg-primary-700 p-2">
            <InfoCircleFilled
              className="ml-2 mr-1"
              size={28}
              style={{ color: 'var(--brand-color)' }}
            />
            <div className="text-xs">发布或者保存在云端的历史版本。</div>
          </div>
        </div>
        <div className="flex-1 overflow-y-auto">
          <CloudHistoryEdit onSwitchCloudVersion={onSwitchCloudVersion} />
        </div>
      </div>
    );
  }, [onSwitchCloudVersion]);

  const Render = useMemo(() => {
    return (
      <>
        <MiniMap
          style={{
            height: 92,
            width: 127,
            marginBottom: 66,
            marginRight: 15,
            borderRadius: '10px',
            boxShadow: '0px 0px 1px rgba(19, 51, 107, 0.10), 0px 4px 10px rgba(19, 51, 107, 0.10)',
          }}
          pannable
          nodeComponent={MiniMapNode}
        />
        {/* 缩放 */}
        <Panel
          position="bottom-right"
          style={{
            display: 'flex',
            // marginBottom: 28,
            paddingBottom: '2px',
            overflow: 'hidden',
            alignItems: 'center',
            gap: '8px',
          }}
        >
          <div className={`${controlPanelClass} flex w-[127px] items-center justify-center`}>
            {/* zoom out */}
            <MyTooltip title={isMac ? t('common.zoomin_tip_mac') : t('common.zoomin_tip')}>
              <ControlButton
                onClick={() => zoomOut()}
                style={buttonStyle}
                className={`${styles.customControlButton}`}
                disabled={zoom <= minZoom}
              >
                <SvgIcon icon="circle-minus" size={16} />
              </ControlButton>
            </MyTooltip>

            <span className="w-11 text-center">{(getZoom() * 100).toFixed(0)}%</span>

            {/* zoom in */}
            <MyTooltip title={isMac ? t('common.zoomout_tip_mac') : t('common.zoomout_tip')}>
              <ControlButton
                onClick={() => zoomIn()}
                style={buttonStyle}
                className={`${styles.customControlButton}`}
                disabled={zoom >= maxZoom}
              >
                <SvgIcon icon="circle-plus" size={16} />
              </ControlButton>
            </MyTooltip>
          </div>
        </Panel>

        {/* 系统配置 */}
        <Panel
          position="top-left"
          style={{
            display: 'flex',
            marginBottom: 28,
            padding: '5px 8px',
            overflow: 'hidden',
            alignItems: 'center',
            gap: '8px',
          }}
        >
          <div>
            {isOpenSystemConfig ? (
              <div className="flex">
                <div className={controlPanelClass}>
                  <NodeFlowSystemConfig onClose={() => setIsOpenSystemConfig(false)} />
                </div>
                <div
                  className="group z-50 mt-6 flex h-[40px] w-[16px] cursor-pointer items-center rounded-br-lg rounded-tr-lg bg-white"
                  onClick={() => setIsOpenSystemConfig(false)}
                >
                  <SvgIcon icon="arrow-left" color="var(--text-3)" size={12} />
                </div>
              </div>
            ) : (
              <div className={controlPanelClass}>
                <ControlButton
                  style={{ ...buttonStyle, width: '100px' }}
                  className={`${styles.customControlButton}`}
                  onClick={() => setIsOpenSystemConfig(!isOpenSystemConfig)}
                >
                  <div className="flex items-center justify-center gap-2">
                    <SvgIcon
                      icon="workflow-basic"
                      size={28}
                      color={`${isOpenSystemConfig ? 'var(--brand-color)' : 'var(--text-color)'}`}
                    />
                    <span className={`${isOpenSystemConfig ? 'text-primary' : 'text-text-color'}`}>
                      应用配置
                    </span>
                  </div>
                </ControlButton>
              </div>
            )}
          </div>
        </Panel>

        {/* 调试 检查清单 历史记录 */}
        <Panel
          position="top-right"
          style={{
            display: 'flex',
            marginBottom: 28,
            padding: '5px 8px',
            overflow: 'hidden',
            alignItems: 'center',
            gap: '8px',
          }}
        >
          {!isOpenTest && (
            <div className={controlPanelClass}>
              <ControlButton
                style={{ ...buttonStyle, width: '112px' }}
                className={`${styles.customControlButton}`}
                onClick={() => {
                  const data = flowData2StoreDataAndCheck();
                  if (data) {
                    setWorkflowTestData(data);
                  }
                }}
              >
                <div className="flex items-center justify-center gap-1">
                  <SvgIcon icon="workflowStart" color="var(--brand-color)" size={20} />
                  <span className="text-sm text-text-5">{t('core.workflow.Run')}</span>
                </div>
              </ControlButton>
            </div>
          )}

          {!preview && (
            <div className={controlPanelClass}>
              {!preview && (
                <div className="flex items-center">
                  <Popover
                    placement="bottomRight"
                    trigger="click"
                    content={<WorkflowCheckList checkList={checkList} />}
                    destroyOnHidden
                    arrow={false}
                    styles={{
                      root: {
                        paddingTop: 10,
                      },
                    }}
                  >
                    <MyTooltip title="检查清单">
                      <ControlButton
                        style={buttonStyle}
                        className={`${styles.customControlButton}`}
                      >
                        <SvgIcon icon="checklist" size={16} />
                      </ControlButton>
                    </MyTooltip>
                  </Popover>
                  {checkList && checkList.invalidNodes.length > 0 && (
                    <div className="absolute right-[56px] top-0 h-4 w-4 rounded-full bg-gradient-to-b from-[#ff4646] to-[#ff8f62] text-center text-xs text-white">
                      {checkList?.invalidNodes.length}
                    </div>
                  )}
                </div>
              )}
            </div>
          )}

          {!preview && (
            <div className={controlPanelClass}>
              {
                <Popover
                  placement="bottomRight"
                  trigger="click"
                  content={cloudHistoryContent}
                  // onOpenChange={(open) => {
                  //   if (open) {
                  //     refreshList();
                  //   }
                  // }}
                  arrow={false}
                  styles={{
                    root: {
                      paddingTop: 10,
                    },
                  }}
                  destroyOnHidden
                >
                  <MyTooltip title="版本历史">
                    <ControlButton style={buttonStyle} className={`${styles.customControlButton}`}>
                      <SvgIcon icon="history-cloud" size={16} />
                    </ControlButton>
                  </MyTooltip>
                </Popover>
              }
            </div>
          )}
        </Panel>
        <Panel
          position="bottom-center"
          style={{
            display: 'flex',
            // marginBottom: 28,
            // padding: '5px 8px',
            paddingBottom: '2px',
            overflow: 'hidden',
            alignItems: 'center',
            gap: '8px',
          }}
        >
          {/* Control Mode */}

          <div className={controlPanelClass}>
            <MyTooltip
              title={workflowControlMode === 'select' ? t('pan_priority') : t('mouse_priority')}
            >
              <ControlButton
                onClick={() => {
                  setWorkflowControlMode(workflowControlMode === 'select' ? 'drag' : 'select');
                }}
                style={{
                  ...buttonStyle,
                }}
                className={`${styles.customControlButton}`}
              >
                {workflowControlMode === 'select' ? (
                  <SvgIcon icon="ai-chukongmoshi" size={16} />
                ) : (
                  <SvgIcon icon="mouse" size={16} />
                )}
              </ControlButton>
            </MyTooltip>
          </div>

          {!preview && (
            <div className={controlPanelClass}>
              {/* undo */}
              {!preview && (
                <MyTooltip title={isMac ? t('common.undo_tip_mac') : t('common.undo_tip')}>
                  <ControlButton
                    onClick={undo}
                    style={buttonStyle}
                    className={`${styles.customControlButton}`}
                    disabled={!canUndo}
                  >
                    <SvgIcon icon="chehui" size={16} />
                  </ControlButton>
                </MyTooltip>
              )}

              {/* redo */}
              {!preview && (
                <MyTooltip title={isMac ? t('common.redo_tip_mac') : t('common.redo_tip')}>
                  <ControlButton
                    onClick={redo}
                    style={buttonStyle}
                    className={`${styles.customControlButton}`}
                    disabled={!canRedo}
                  >
                    <SvgIcon icon="forward" size={16} />
                  </ControlButton>
                </MyTooltip>
              )}

              {!preview && (
                <Popover
                  placement="top"
                  trigger="click"
                  content={historyContent}
                  arrow={false}
                  styles={{
                    root: {
                      paddingBottom: 10,
                    },
                  }}
                >
                  <MyTooltip title="操作历史">
                    <ControlButton style={buttonStyle} className={`${styles.customControlButton}`}>
                      <SvgIcon icon="workflow-edit-history" size={16} />
                    </ControlButton>
                  </MyTooltip>
                </Popover>
              )}
            </div>
          )}

          <div className={controlPanelClass}>
            <MyTooltip title={t('common.node_unfold')}>
              <ControlButton
                onClick={() => ChangeAllNodesFold(false)}
                style={buttonStyle}
                className={`custom-workflow-fix_view ${styles.customControlButton}`}
              >
                <SvgIcon icon="expandnode" size={16} />
              </ControlButton>
            </MyTooltip>
            <MyTooltip title={t('common.node_fold')}>
              <ControlButton
                onClick={() => ChangeAllNodesFold(true)}
                style={buttonStyle}
                className={`custom-workflow-fix_view ${styles.customControlButton}`}
              >
                <SvgIcon icon="foldnode" size={16} />
              </ControlButton>
            </MyTooltip>

            {/* fit view */}
            <MyTooltip title={t('common.page_center')}>
              <ControlButton
                onClick={() => FitFlowView()}
                style={buttonStyle}
                className={`custom-workflow-fix_view ${styles.customControlButton}`}
              >
                <SvgIcon icon="screencenter" size={16} />
              </ControlButton>
            </MyTooltip>

            {/* focus node */}
            {selectedNode && (
              <MyTooltip title={t('common.focus_node')}>
                <ControlButton
                  onClick={() => focusNode(selectedNode.id)}
                  style={buttonStyle}
                  className={`custom-workflow-fix_view ${styles.customControlButton}`}
                >
                  <SvgIcon icon="focus-one" size={16} />
                </ControlButton>
              </MyTooltip>
            )}

            {!preview && (
              <>
                {/* <div className="mx-1 h-[12px] w-[1px] bg-line-2" /> */}
                <Popover
                  placement="bottom"
                  trigger="click"
                  content={<NodeTemplatesModal />}
                  arrow={false}
                  styles={{
                    root: {
                      paddingBottom: 20,
                    },
                  }}
                >
                  <ControlButton
                    onClick={(e) => {
                      isOpenTemplate ? onCloseTemplate() : onOpenTemplate();
                    }}
                    style={{
                      width: 120,
                      background: 'transparent',
                      padding: '0 2px',
                    }}
                    className="node-add-nodes-button custom-workflow-fix_view"
                  >
                    <div className="flex w-28 items-center justify-center gap-2 rounded-md bg-@brand-color-gradient py-1 text-center text-white hover:bg-primary-800">
                      <SvgIcon icon="add" size={16} />
                      <span>添加节点</span>
                    </div>
                  </ControlButton>
                </Popover>
              </>
            )}
          </div>
        </Panel>
        <Background />
      </>
    );
  }, [
    MiniMapNode,
    isMac,
    zoom,
    getZoom,
    isOpenSystemConfig,
    isOpenTest,
    preview,
    checkList,
    cloudHistoryContent,
    workflowControlMode,
    undo,
    canUndo,
    redo,
    canRedo,
    historyContent,
    selectedNode,
    zoomOut,
    zoomIn,
    flowData2StoreDataAndCheck,
    setWorkflowTestData,
    setWorkflowControlMode,
    ChangeAllNodesFold,
    FitFlowView,
    focusNode,
    isOpenTemplate,
  ]);

  return Render;
});

export default FlowController;
